/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../lib/bs4/scss/bootstrap.scss" />


//
// Bidi
// --------------------------------------------------

[dir=rtl] {
	direction: rtl;
	text-align: right;

	body {
		text-align: right;
	}

	// Opposite/mixed
	[dir=ltr] {
		direction: ltr;
		// INFO: "right" is correct!
		text-align: right;
	}
}


//
// Grid stuff
// --------------------------------------------------

.sm-gutters {
	$gw: 0.5rem;
	margin-right: $gw * -1;
	margin-left: $gw * -1;

	> .col, 
	> [class*="col-"] {
		padding-right: $gw;
		padding-left: $gw;
	}
}

.xs-gutters {
	$gw: 0.25rem;
	margin-right: $gw * -1;
	margin-left: $gw * -1;

	> .col, 
	> [class*="col-"] {
		padding-right: $gw;
		padding-left: $gw;
	}
}

.container-fluid {
	padding-left: 6%;
	padding-right: 6%;
}


//
// Count badge
// --------------------------------------------------

.has-count[data-count]:after {
	content: "(" attr(data-count) ")";
	position: relative;
	display: inline-block;
	opacity: 0.6;
	padding-left: 0.2rem;
	font-weight: 400;
}


//
// Icon margins
// ------------------------------------------------------

.btn,
.nav-link,
.menubar-link {
	> i + span:not(:empty), > .bi + span:not(:empty),
	> i + em:not(:empty), > .bi + em:not(:empty) {
		padding-left: 0.5em;
	}

	> span:not(:empty) + i, > span:not(:empty) + .bi,
	> em:not(:empty) + i, > em:not(:empty) + .bi {
		margin-left: 0.5em;
	}
}


// Data binding 3d rotate
// ------------------------------------------------------

@keyframes data-binding {
	0% {
		transform: rotateY(0deg);
	}

	50% {
		transform: rotateY(180deg);
		color: transparent;
	}

	100% {
		transform: rotateY(360deg);
	}
}

.data-binding {
	animation: data-binding 0.5s ease-in-out;
}


//
// Fontastic utils (ensure crisp icons with 20/40...px)
// ------------------------------------------------------

.icm {
	font-size: 20px;
	display: inline-block;
}

.icm-2x {
	font-size: 40px;
}

.icm-3x {
	font-size: 60px;
}

.icm-4x {
	font-size: 80px;
}

.icm-5x {
	font-size: 100px;
}


// Imaging
// ------------------------------------------------------

.img-center-container {
	display: block;
	position: relative;
	height: 0;
	width: 100%;
    padding-top: calc(var(--img-aspect-ratio, 1) * 100%);
	text-decoration: none !important;
	outline: none !important;

    > img,
    > figure {
		position: absolute;
		max-width: 100%;
		max-height: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
}

// apply img-fluid to all images within html editor content
.html-editor-content img {
	max-width: 100%;
	// TBD: WATCH!!!!
	height: auto !important;
}

.fit-fill       { object-fit: fill; }
.fit-contain    { object-fit: contain; }
.fit-cover      { object-fit: cover; }
.fit-scale-down { object-fit: scale-down; }
.fit-none       { object-fit: none; }


//
// Flag icon
// --------------------------------------------------

img[src*="/images/flags/"] {
    width: 20px;
    min-height: 10px;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(#000, 0.15);
}


//
// Bootstrap overrides and tweaks
// --------------------------------------------------

.dropdown .badge {
	font-size: $font-size-xs;
}

.popover-title {
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-weight: $font-weight-medium;
}

.tooltip {
	font-size: $font-size-sm;
}

.badge:not(.badge-pill) {
	border-radius: $border-radius-sm;
}

table th {
	font-weight: $font-weight-medium;
}


//
// Bootstrap additions
// --------------------------------------------------

.embed-responsive-16by10 {
    &::before {
        padding-top: percentage(10 / 16);
    }
}


//
// Bootstrap List group tweaks
// ------------------------------------------------------

.list-group {
	.list-group-item {
		overflow: hidden;
	}

	.list-group-item.active {
		&:before {
			@include active-list-item($size: 3px);
		}
	}

	&.has-icons {
		.list-group-item {
			display: inline-flex;
			align-items: baseline;
		}

		.list-group-item-icon {
			margin-right: 0.75rem;
		}
	}
}


//
// Extra border utils
// ------------------------------------------------------

.border-translucent {
    border-color: rgba(#000, 0.12) !important;
}

.rounded, 
.rounded-top, 
.rounded-right, 
.rounded-bottom, 
.rounded-left {
    --border-radius: #{$border-radius};
    --border-radius-inner: calc(#{$border-radius} - 1px);
}

.rounded-sm {
    --border-radius: #{$border-radius-sm};
    --border-radius-inner: calc(#{$border-radius-sm} - 1px);
    border-radius: $border-radius-sm !important;
}

.rounded-lg {
    --border-radius: #{$border-radius-lg};
    --border-radius-inner: calc(#{$border-radius-lg} - 1px);
    border-radius: $border-radius-lg !important;
}

.rounded-xl {
    --border-radius: #{$border-radius-lg * 2};
    --border-radius-inner: calc(#{$border-radius-lg * 2} - 2px);
    border-radius: $border-radius-lg * 2 !important;
}

.rounded-circle {
    --border-radius: 50%;
}

.rounded-pill {
    --border-radius: 50rem;
    --border-radius-inner: calc(50rem - 1px);
    border-radius: 50rem;
}

.rounded-0 {
    --border-radius: 0;
}


// Extra color utils
// ------------------------------------------------------

@each $g, $value in $grays {
    .bg-gray-#{$g} {
        background-color: $value !important;
    }

    .text-gray-#{$g} {
        color: $value !important;
    }
}


//
// Shadows
// --------------------------------------------------

.shadow,
.shadow-xs,
.shadow-sm,
.shadow-lg,
:root {
    $c: $dark;
    --shadow-color-rgb: 0,0,0;
    --shadow-colorbase-rgb: #{red($c)}, #{green($c)}, #{blue($c)};
    --shadow-intensity: #{$shadow-intensity};
}

.shadow {
    --box-shadow: #{$box-shadow-var};
}

.shadow-xs {
    --box-shadow: #{$box-shadow-xs-var};
    box-shadow: var(--box-shadow) !important;
}

.shadow-sm {
    --box-shadow: #{$box-shadow-sm-var};
}

.shadow-lg {
    --box-shadow: #{$box-shadow-lg-var};
}

@each $color, $value in $theme-colors {
    @if $color != "secondary" and $color != "light" { 
        .shadow-#{$color} { 
            $c: mix($value, #000, 50%);
            --lightness: #{lightness($value)};
            --shadow-intensity: 1.25 !important;
            --shadow-color-rgb: #{red($c)}, #{green($c)}, #{blue($c)} !important;
            --shadow-colorbase-rgb: var(--shadow-color-rgb) !important;
        }
    }
}

.shadow-light {
    box-shadow: 0 0 20px 0 rgba(#000, .08);
}


//
// Some shims
// ------------------------------------------------------

.hide {
	display: none;
}

.muted {
	@extend .text-muted;
}

.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    from  { opacity: 0; transform: translate3d(0, 20px, 0); }
    to    { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInDown {
    from  { opacity: 0; transform: translate3d(0, -20px, 0); }
    to    { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeOutLeft {
    from  { opacity: 1; }
    to    { opacity: 0; transform: translate3d(-20px, 0, 0); }
}

@keyframes fadeOutRight {
    from  { opacity: 1; }
    to    { opacity: 0; transform: translate3d(20px, 0, 0); }
}

.fadeOutLeft    { animation-name: fadeOutLeft; }
.fadeOutRight   { animation-name: fadeOutRight; }
.fadeInUp		{ animation-name: fadeInUp; }
.fadeInDown     { animation-name: fadeInDown; }

//
// Profiler sucks on small screens
// ------------------------------------------------------

@include media-breakpoint-down(sm) {
	.mp-results {
		display: none !important;
	}
}


// JQUERY UI STUFF
// -------------------------

.ui-effects-transfer,
.transfer {
	border: 2px dotted $gray-700 !important;
	background: transparent;
	z-index: 100000;
}


// Sizing
// -------------------------

.h-medium     { min-height: 400px; }
.h-tall       { min-height: 700px; }

@each $breakpoint in (sm, md, lg, xl) {
    @include media-breakpoint-up($breakpoint) {
        .h-#{$breakpoint}-medium     { min-height: 400px; }
        .h-#{$breakpoint}-tall       { min-height: 700px; }
    }
}


//
// Flip & Rotate
// --------------------------------------------------

.flip-h {
    transform: scale(-1, 1) translate(var(--offset-x, 0), var(--offset-y, 0));
}

.flip-v {
    transform: scale(1, -1) translate(var(--offset-x, 0), var(--offset-y, 0));
}

.flip-hv {
    transform: scale(-1, -1) translate(var(--offset-x, 0), var(--offset-y, 0));
}

.rotate-90 {
    transform: rotate(90deg) translate(var(--offset-x, 0), var(--offset-y, 0));
}

.rotate-180 {
    transform: rotate(180deg) translate(var(--offset-x, 0), var(--offset-y, 0));
}

.rotate-270 {
    transform: rotate(270deg) translate(var(--offset-x, 0), var(--offset-y, 0));
}


//
// Animations
// --------------------------------------------------

@keyframes fade {
    0% { opacity: 0.2; }
    to { opacity: 1; } 
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); } 
}

@keyframes beat {
    0%, 90% { transform: scale(1) }
    45% { transform: scale(var(--beat-scale, 1.25)) }
}

@keyframes throb {
    0% { opacity: .5; transform: scale(.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes cylon {
    0% { transform: translateX(-25%); }
    to { transform: translateX(25%); } 
}

@keyframes cylon-vertical {
    0% { transform: translateY(25%); }
    to { transform: translateY(-25%); } 
}

.animate-fade {
    transform-origin: center;
    animation: fade var(--animation-duration, 0.75s) ease-in-out infinite alternate; 
}

.animate-spin {
    transform-origin: center;
    animation: spin var(--animation-duration, 2s) linear infinite normal; 
}

.animate-spin-reverse {
    transform-origin: center;
    animation: spin var(--animation-duration, 2s) linear infinite reverse; 
}

.animate-spin-pulse {
    transform-origin: center;
    animation: spin var(--animation-duration, 1s) steps(8) infinite normal; 
}

.animate-spin-pulse-reverse {
    transform-origin: center;
    animation: spin var(--animation-duration, 1s) steps(8) infinite reverse; 
}

.animate-beat {
    transform-origin: center;
    animation: beat var(--animation-duration, 0.75s) infinite ease-in-out; 
}

.animate-throb {
    transform-origin: center;
    animation: throb var(--animation-duration, 0.75s) ease-in-out infinite alternate; 
}

.animate-cylon {
    transform-origin: center;
    animation: cylon var(--animation-duration, 0.75s) ease-in-out infinite alternate; 
}

.animate-cylon-vertical {
    transform-origin: center;
    animation: cylon-vertical var(--animation-duration, 0.75s) ease-in-out infinite alternate; 
}


// Parallax stuff
// ------------------------------------------------------

html:not(.edge) .parallax[data-parallax-type=content] {
    will-change: transform;

    &.parallax-smooth {
        transition: transform 0.15s cubic-bezier(.25,.57,.63,.8);
    }
}


// Animations
// ------------------------------------------------------

.no-anims,
.no-anims * {
    transition-property: none !important;
    transition-duration: 0 !important;
    animation: none !important;
    //transform: none !important;
}


//
// Gloss effect
// --------------------------------------------------

.gloss {
    overflow: hidden;
    position: relative;

    &:before {
        pointer-events: none;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(0deg, rgba(#fff,0), rgba(#fff,.1) 10%, rgba(#fff,0));
        transition: transform .8s, opacity 0s;
        //transition-timing-function: cubic-bezier(0.56, 0.83, 0.45, 0.99);
        transform: scale3d(1.8, 1.3, 1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0);
        opacity: 0;
        z-index: 100;
    }

    &.active:before, &.gloss-hover:hover:before, &.gloss-focus:focus:before {
        transform: scale3d(1.8, 1.3, 1) rotate3d(0,0,1,45deg) translate3d(0,240%,0);
        opacity: 1;
    }

    &.gloss-tall:before {
        width: 142%;
    }

    &.gloss-wide:before {
        transform: scale3d(1.8, 1.3, 1) rotate3d(0,0,1,45deg) translate3d(0,-240%,0);
    }

    &.gloss-fast:before {
        transition: transform .5s, opacity 0s;
    }

    &.gloss-back:before {
        opacity: 1;
    }
}


// Misc utils
// -------------------------

.last-mb-0:last-child {
	margin-bottom: 0 !important;
}